<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings to match the hand-drawn image
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;

        // Origin point
        const Ox = 220;
        const Oy = 230;

        // Helper function to draw a line with an arrowhead
        function drawArrow(fromX, fromY, toX, toY) {
            const headlen = 12; // length of head in pixels
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Draw Coordinate Axes ---
        const axisLength = 160;
        // z-axis (up)
        drawArrow(Ox, Oy, Ox, Oy - axisLength);
        // y-axis (right)
        drawArrow(Ox, Oy, Ox + axisLength, Oy);
        // x-axis (down-left perspective)
        const xEndX = Ox - axisLength * 0.8;
        const xEndY = Oy + axisLength * 0.5;
        drawArrow(Ox, Oy, xEndX, xEndY);

        // --- Draw Labels for Axes and Origin ---
        ctx.font = 'bold 22px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        ctx.fillText('z', Ox, Oy - axisLength - 15);
        ctx.fillText('y', Ox + axisLength + 15, Oy);
        ctx.fillText('x', xEndX - 15, xEndY + 5);
        ctx.fillText('O', Ox + 12, Oy - 12);

        // --- Draw Vectors P1 and P2 ---
        const vecLen = 120;
        // Vector P1 (along the x-axis)
        const p1EndX = Ox - vecLen * 0.8;
        const p1EndY = Oy + vecLen * 0.5;
        drawArrow(Ox, Oy, p1EndX, p1EndY);
        
        // Vector P2 (in the xy-plane, visually placed)
        const p2EndX = Ox - 30;
        const p2EndY = Oy + 65;
        drawArrow(Ox, Oy, p2EndX, p2EndY);

        // --- Draw Labels for Vectors ---
        // Label for P1
        ctx.font = 'bold 24px serif';
        ctx.fillText('P', 130, 260);
        ctx.font = 'bold 16px serif';
        ctx.fillText('1', 143, 265);

        // Label for P2
        ctx.font = 'bold 24px serif';
        ctx.fillText('P', 205, 305);
        ctx.font = 'bold 16px serif';
        ctx.fillText('2', 218, 310);

        // --- Draw Angle Arc and Label ---
        const angleRadius = 45;
        // Calculate angles for the arc
        const angle1 = Math.atan2(p1EndY - Oy, p1EndX - Ox);
        const angle2 = Math.atan2(p2EndY - Oy, p2EndX - Ox);

        ctx.beginPath();
        // The arc is drawn from P1 to P2, which corresponds to angle1 to angle2
        ctx.arc(Ox, Oy, angleRadius, angle1, angle2);
        ctx.stroke();

        // Label for the angle φ₀
        const midAngle = (angle1 + angle2) / 2;
        const labelRadius = angleRadius + 15;
        const labelX = Ox + labelRadius * Math.cos(midAngle);
        const labelY = Oy + labelRadius * Math.sin(midAngle);
        
        ctx.font = 'italic 22px serif';
        ctx.fillText('φ', labelX, labelY);
        ctx.font = 'italic 15px serif';
        ctx.fillText('0', labelX + 10, labelY + 6);

        // --- Draw Figure Caption ---
        ctx.font = '20px serif';
        ctx.fillText('Fig. 4.36', canvas.width / 2, canvas.height - 30);
    </script>
</body>
</html>